<template>
  <div style="width: 100%; height: 100%">
    <div class="path-warpper">
      <el-input v-model="remotePath" @keyup.enter.native="setSftpList">
        <template #prepend>
          <el-button :icon="Back" @click="onBack" :disabled="remotePath === '/'"></el-button>
        </template>
        <template #append>
          <!-- <el-icon @click="setSftpList" style="width: 100%; height: 100%"
            ><LocationInformation
          /></el-icon> -->
          <el-button :icon="LocationInformation" @click="setSftpList"></el-button>
        </template>
      </el-input>
    </div>
    <div style="height: calc(100% - 50px); width: 100%">
      <el-table :data="tableData" @row-dblclick="rowDblclick" style="height: 100%">
        <el-table-column fixed prop="name" label="名称" min-width="220">
          <template #default="scope">
            <el-icon v-if="scope.row.directory"><Folder /></el-icon>
            <el-icon v-else><Document /></el-icon>
            <span style="padding-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="大小(kb)" width="100" />
        <el-table-column prop="permissions" label="权限" width="120" />
        <el-table-column prop="lastModifiedTime" label="修改时间" width="150">
          <template #default="scope">
            {{ formatDate(scope.row.lastModifiedTime, 'yyyy-MM-dd HH:mm') }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getSftpList } from '@/api/oam/sftp';
import { onMounted, ref, watch } from 'vue';
import type { IFileInfo } from './fileInfo';
import { formatDate } from '@/utils/func';
import { Back, LocationInformation } from '@element-plus/icons-vue';
defineOptions({
  name: 'DwSftp',
});
const tableData = ref<IFileInfo[]>([]);

const remotePath = ref<string>('/');
const setSftpList = () => {
  getSftpList(remotePath.value).then((res) => {
    tableData.value = res.data as unknown as IFileInfo[];
  });
};
const onBack = () => {
  const paths = remotePath.value.split('/').filter((item: string) => {
    return item !== '';
  });
  if (paths.length === 1) {
    remotePath.value = '/';
  } else {
    paths.pop();
    remotePath.value = '/' + paths.join('/') + '/';
  }
  setSftpList();
};
onMounted(() => {
  setSftpList();
});
const rowDblclick = (row: IFileInfo) => {
  if (row.directory) {
    if (remotePath.value.endsWith('/')) {
      remotePath.value = remotePath.value + row.name + '/';
    } else {
      remotePath.value = remotePath.value + '/' + row.name + '/';
    }
    setSftpList();
  }
};
</script>
<style lang="scss" scoped>
.path-warpper {
  width: calc(100% - 20px);
  margin: 5px auto;
}
</style>
